<template>
  <div class="judje">
    <el-form class="judjeborder" label-width="80px" :model="judgeinfo" :rules="rules" ref="judgeinfo">
      <el-form-item label="题目名称" prop="name">
        <el-input v-model="judgeinfo.name" type="textarea" autosize></el-input>
      </el-form-item>
      <div class="upload_image">
        <imgupload @img="geturl"></imgupload>
        <img :src="judgeinfo.imgUrl" v-if="judgeinfo.imgUrl" width="300" height="250" />
      </div>
      <el-form-item label="选项" prop="radio">
        <el-radio-group v-model="judgeinfo.radio">
          <el-radio :label="chooselist[0]">正确</el-radio>
          <el-radio :label="chooselist[1]">错误</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-button class="topicsavebtn" type="primary" @click="savejudge('judgeinfo')">保存</el-button>
  </div>
</template>

<script>
  import imgupload from './ImgUpload'
  export default {
    name: 'Judge',
    components:{
      imgupload
    },
    data() {
      return {
        chooselist: [1, 2],
        judgeinfo: {
          name: '',
          questionType: 2,
          echoice: ['正确','错误'],
          radio: [],
          imgUrl: ''
        },
        rules:{
          name:[{
            required: true,
            message: '请输入题目名称',
            trigger: 'blur'
          }],
          radio:[{
            required: true,
            message: '请选择答案',
            trigger: 'blur'
          }]
        }
        // edit: false,
        // description: "你好！"
      }
    },
    methods: {
      geturl(url){
        this.judgeinfo.imgUrl = url;
      },
      savejudge(judgeinfo) {
        //输入验证
        this.$refs[judgeinfo].validate((valid) => {
          if (valid) {
            this.$emit('func',this.judgeinfo);
          } else {
            // console.log('error submit!!');
            this.$message('请输入完整');
            return false;
          }
        });
        //发请求
        //向父组件传参

      }
    }
  }
</script>

<style>
  .judje {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 80%;
    background-color: #f5f5f5;
  }

  .judjeborder {
    margin: 0.3125rem;
  }
  .upload_image{
    display: flex;
    flex-direction: row-reverse;
  }

  .judjename {
    /* display: flex; */
  }

  .iconfontsize {
    font-size: 20px;
  }

  .topicsavebtn {
    margin: 5px;
  }
</style>
